<template>
  <div class="container">

    <!-- 顶部按钮区域 -->
    <div class="header">
      <el-form :inline="true" class="demo-form-inline" size="small" label-width="80px">
        <!-- <el-form-item label="所属部门">
          <el-select v-model="queryData.deptId" placeholder="部门账号">
            <el-option v-for="item in bmzhanghao" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item label="搜索">
          <el-input v-model="queryData.checkinSummary" placeholder="请输入关键字"></el-input>
        </el-form-item>
<!--        <el-form-item label="是否督办">-->
<!--          <el-select v-model="queryData.supervisingIs" placeholder="是否督办">-->
<!--            <el-option label="全部" value=""></el-option>-->
<!--            <el-option label="是" value="0"></el-option>-->
<!--            <el-option label="否" value="1"></el-option>-->
<!--          </el-select>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="办理周期">-->
<!--          <el-date-picker v-model="queryData.timeData" type="daterange" value-format="yyyy-MM-dd" align="right"-->
<!--                          unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"-->
<!--                          :picker-options="pickerOptions2">-->
<!--          </el-date-picker>-->
<!--        </el-form-item>-->
        <el-form-item>
          <el-button class="search_button" type="primary" icon="el-icon-search" @click="getList">搜索</el-button>
          <el-button class="chongzhi_button" type="default" icon="el-icon-refresh" @click="onReset">重置</el-button>
          <!-- <el-button v-has-permi="['duban']" type="primary" @click="onplduban">批量督办</el-button> -->
        </el-form-item>
      </el-form>
    </div>

    <!-- 表格区域 -->
    <el-table :data="tableData" style="width: 100%; " heigth="600px" stripe @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" :selectable="isNotSupervising"></el-table-column>
      <el-table-column prop="createTime" label="登记时间" width="180"></el-table-column>
      <el-table-column label="简要事由" prop="checkinSummary" width="300">
          <template slot-scope="scope">
            <el-popover width="400" class="item" effect="dark" :content="scope.row.checkinSummary"
              placement="top-start" trigger="hover">
              <span slot="reference">{{ scope.row.checkinSummary.slice(0, 80) + (scope.row.checkinSummary.length > 80 ?
                '...' : '') }}</span>
            </el-popover>
          </template>
        </el-table-column>
      <el-table-column prop="gender" label="诉求人信息" width="300">
        <template slot-scope="scope">
          <div class="first">
            <i class="el-icon-s-custom"></i>
            {{ scope.row.demandsName }} | {{ scope.row.demandsSexNmae }} | {{ scope.row.checkinPhonenumber }}
          </div>
          <div class="first">
            <i class="el-icon-s-order"></i>
            {{ scope.row.demandsCardno }}
          </div>
          <div class="first" style="width: 200px; overflow: hidden; text-overflow:ellipsis; white-space:nowrap">
            <i class="el-icon-location"></i>
            {{ scope.row.demandsAvatar }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="contactPhone" label="相关身份信息" width="250">
        <template slot-scope="scope">
          <div class="first" v-for="(item, index) in scope.row.mdjfCasePersonList">
            <i class="el-icon-s-custom"></i>
            {{ item.casePersonName }} | {{ item.casePersonCardno }}
          </div>
        </template>
      </el-table-column>

      <el-table-column prop="address" label="纠纷类型" width="120">
        <template slot-scope="scope">
          <el-tag type="info">{{ scope.row.checkinDictJflxName }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="department" label="办理部门">
        <template slot-scope="scope">
          <el-tag class="flzbbumen">{{ scope.row.checkinDeptName || '未知' }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="department" label="案件状态">
        <template slot-scope="scope">
          <div>
            <div class="yduban1" v-if="scope.row.supervisingIs == 1">未督办</div>
            <div class="yduban" v-if="scope.row.supervisingIs == 0">已督办</div>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="department" label="截止处理时间" width="160" align="center">
        <template slot-scope="scope">
          <div>
            <div style="font-size: 12px">办结时间剩余</div>
            <div style="font-size: 12px"
                 class="redclass">
              {{scope.row.formattedDiff}}
<!--              {{ initTime(scope.row.disposeEndTime) }}-->
            </div>
          </div>
        </template>
      </el-table-column>
<!--      <el-table-column label="操作" width="100" fixed="right">-->
<!--        <template slot-scope="scope">-->
<!--          <el-button v-has-permi="['duban']" size="mini" type="text" @click="handleTabClick(scope.row)"-->
<!--                     v-if="scope.row.supervisingIs == 1">-->
<!--            督 办-->
<!--          </el-button>-->
<!--        </template>-->
<!--      </el-table-column>-->
    </el-table>
    <el-dialog :visible.sync="dialogVisible" width="50%" :title="dialogTitle">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" size="small" label-width="150px" class="demo-ruleForm">

        <el-row>
          <el-col :span="24" style="margin-top: 10px;">
            <el-form-item label="上传督办函" prop="fileData">
              <FileUpload v-model="ruleForm.fileData" />
            </el-form-item>
          </el-col>
        </el-row>

      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="subData">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 分页区域 -->
    <!-- 分页区域 -->
    <div class="pagination-container">
      <el-pagination background @current-change="handlePageChange" :current-page="queryData.pageNum"
                     :page-size="queryData.pageSize" :total="totalItems" layout="total, prev, pager, next" class="pagination" />
    </div>
  </div>
</template>

<script>
import {listOrderByDiff, mainlist, mainUpdate} from '@/api/aapal'
import { getInfo } from '@/api/login'
export default {
  data() {
    return {
      pickerOptions2: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },userId:'',
      fileData: '',
      totalItems: 0,
      dialogVisible: false,
      queryData: {
        pageNum: 1,
        pageSize: 10,
        timeData: [],
        disposeStatusLs: '1,2',
      },
      tableData: [],
      timer: null,
      hoverStyle: {
        backgroundColor: "#e4f7ff",
        color: "#409eff",
      },
      selectedRows: [], // 用于存储选中的行
      rules: {
        fileData: [
          { required: true, message: '请上传督办函', trigger: 'blur' },
        ],

      }, ruleForm: {},
      dialogTitle: '',
      supervisingIs: 0,
      supervisingSysUserId:'',
      supervisingTime:''
    };
  },
  mounted() {
    this.getList()
    this.timer = setInterval(() => {
      this.getList();
    }, 60000);
  },
  destroyed() {
    clearInterval(this.timer)
  },
  methods: {
    // 判断是否已经督办，返回false则不显示复选框
    isNotSupervising(row, index) {
      return row.supervisingIs !== 0;
    },

    /* 批量督办 */
    // onplduban() {
    //   if (this.selectedRows.length === 0) {
    //     this.$message({
    //       type: "warning",
    //       message: "请选择要督办的案件",
    //     });
    //     return;
    //   }
    //   const caseIds = this.selectedRows.map(row => row.caseMainId);
    //   mainUpdate(caseIds).then(res => {
    //     if (res.code === 200) {
    //       this.$message({
    //         type: "success",
    //         message: "批量督办成功",
    //       });
    //     }
    //     this.getList();
    //   });
    // },

    /* 督办按钮 */
    handleTabClick(row) {
      this.caseMainId = row.caseMainId
      this.dialogTitle = '案件督办'
      this.$nextTick(() => {
        this.dialogVisible = true
      });
    },
    /* 确定督办 */
    subData() {
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          mainUpdate({ supervisingFile: this.ruleForm.fileData, caseMainId: this.caseMainId,supervisingIs:this.supervisingIs,supervisingSysUserId:this.userId,supervisingTime:new Date().getTime() }).then(res => {
            if (res.code === 200) {
              this.$message.success("提交成功");
              this.dialogVisible = false
              this.fileData = ""
              this.getList()
            }
          })
        }
        else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    getUserInfo() {
      getInfo().then(res =>{
        this.userId = res.user.userId
      })
    },
    initTime(timeString) {
      const targetTime = new Date(timeString);
      const currentTime = new Date();
      const timeDifference = targetTime - currentTime;
      // 将毫秒转换为不同的时间单位
      const seconds = Math.floor(timeDifference / 1000);
      const minutes = Math.floor(seconds / 60);
      const hours = Math.floor(minutes / 60);
      let days = Math.floor(hours / 24);
      days = days < 10 ? '0' + days : days;
      return (
        days +
        "天" +
        (hours % 24) +
        "小时" +
        (minutes % 60) +
        "分钟"
      );
    },

    getList() {
      const params = {
        ...this.queryData,
        startTime: this.queryData.timeData
          ? this.queryData.timeData[0]
          : "",
        endTime: this.queryData.timeData
          ? this.queryData.timeData[1]
          : "",
        caseWarningParam: 30
      };
      listOrderByDiff(params).then(res => {
        this.tableData = res.rows;
        this.totalItems = res.total;
      });
    },

    /* 头部tabs切换 */
    handleClick() { },

    /* 搜索按钮 */
    onSearch() { },

    /* 重置按钮 */
    onReset() {

      this.queryData = {
        pageNum: 1,
        pageSize: 5,
        disposeStatus: 2,
        timeData: [],
      };
      this.getList();
    },

    // 处理选中的行
    handleSelectionChange(rows) {
      this.selectedRows = rows;
    },

    // 处理
    handleItem(row) {
      console.log("Handling item:", row);
    },

    // 删除
    deleteItem(row) {
      console.log("Deleting item:", row);
    },

    // 分页更改
    handlePageChange(page) {
      this.queryData.pageNum = page;
      this.getList();
    },
  },
};
</script>

<style scoped>
.container {
  margin: 20px 30px;
  font-family: "Arial", sans-serif;
}

.header {
  margin-bottom: 20px;
  background-color: #f4f7fa;
  padding: 15px;
  border-radius: 5px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.button {
  font-size: 14px;
  padding: 8px 16px;
}

.search-container {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
}

.search-input {
  width: 200px;
  margin-right: 20px;
  border-radius: 4px;
}

.search-btn,
.reset-btn {
  padding: 8px 16px;
  font-size: 14px;
}

.search-btn {
  background-color: #409eff;
  color: white;
  margin-right: 10px;
}

.reset-btn {
  background-color: #f0f2f5;
  color: #333;
}

.process-btn {
  background-color: #409eff;
  color: white;
  margin-right: 5px;
  border-radius: 4px;
}

.delete-btn {
  background-color: #f56c6c;
  color: white;
  border-radius: 4px;
}

.el-table th {
  background-color: #f5f7fa;
  font-weight: bold;
}

.el-table td {
  font-size: 14px;
  line-height: 40px;
}

.el-table-row:hover {
  background-color: #f0f9ff;
}

.pagination {
  font-size: 14px;
}

.el-pagination__prev,
.el-pagination__next {
  background-color: #409eff;
  color: white;
}

.el-pagination__pager {
  color: #409eff;
}

.greenclass {
  color: #1ab394;
}

.redclass {
  color: #dd6161;
}
</style>
